<UserControl 
  x:Name="This"
  x:Class="ImmlPad.Plugins.ColorPicker.ColorPickerPlugin"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:l="clr-namespace:ImmlPad.Plugins.ColorPicker"
  xmlns:p="clr-namespace:ImmlPadPlugins;assembly=ImmlPadPlugins"
  xmlns:c="clr-namespace:ImmlPad.Plugins.Controls;assembly=ImmlPadPlugins">
  
  <StackPanel SnapsToDevicePixels="True">
    <StackPanel.Resources>
      
      <p:RoundConverter x:Key="RoundConverter" />
      
      <DrawingBrush x:Key="AlphaBrush" Viewbox="0,0,8,8" ViewboxUnits="Absolute" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,8,8">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <GeometryDrawing Brush="#FFFFFFFF">
              <GeometryDrawing.Geometry>
                <RectangleGeometry RadiusX="0" RadiusY="0" Rect="0,0,4,4"/>
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <DrawingGroup>
              <DrawingGroup.Transform>
                <MatrixTransform Matrix="1,0,0,1,4,0"/>
              </DrawingGroup.Transform>
              <GeometryDrawing Brush="#FFAAAAAA">
                <GeometryDrawing.Geometry>
                  <RectangleGeometry RadiusX="0" RadiusY="0" Rect="0,0,4,4"/>
                </GeometryDrawing.Geometry>
              </GeometryDrawing>
            </DrawingGroup>
            <DrawingGroup>
              <DrawingGroup.Transform>
                <MatrixTransform Matrix="1,0,0,1,0,4"/>
              </DrawingGroup.Transform>
              <GeometryDrawing Brush="#FFAAAAAA">
                <GeometryDrawing.Geometry>
                  <RectangleGeometry RadiusX="0" RadiusY="0" Rect="0,0,4,4"/>
                </GeometryDrawing.Geometry>
              </GeometryDrawing>
            </DrawingGroup>
            <DrawingGroup>
              <DrawingGroup.Transform>
                <MatrixTransform Matrix="1,0,0,1,4,4"/>
              </DrawingGroup.Transform>
              <GeometryDrawing Brush="#FFFFFFFF">
                <GeometryDrawing.Geometry>
                  <RectangleGeometry RadiusX="0" RadiusY="0" Rect="0,0,4,4"/>
                </GeometryDrawing.Geometry>
              </GeometryDrawing>
            </DrawingGroup>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>


      <SolidColorBrush x:Key="Foreground" Color="#DDD" />
      <SolidColorBrush x:Key="SunkenBackground" Color="#444444" />
      <SolidColorBrush x:Key="Highlight" Color="#707070" />
      <SolidColorBrush x:Key="RaisedHighlight" Color="#787878" />
      <SolidColorBrush x:Key="Shadow" Color="#202020" />
      <SolidColorBrush x:Key="RaisedShadow" Color="#101010" />
      <SolidColorBrush x:Key="DisabledForeground" Color="#777" />
      <SolidColorBrush x:Key="DisabledSunkenBackground" Color="#404040" />
      <SolidColorBrush x:Key="DisabledHighlight" Color="#505050" />
      <SolidColorBrush x:Key="DisabledShadow" Color="#303030" />
      <LinearGradientBrush x:Key="Normal" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0.0" Color="#585858" />
        <GradientStop Offset="1.2" Color="#282828" />
      </LinearGradientBrush>
      <LinearGradientBrush x:Key="Down" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0.0" Color="#505050" />
        <GradientStop Offset="1.2" Color="#303030" />
      </LinearGradientBrush>
      <LinearGradientBrush x:Key="MouseOver" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0.0" Color="#686868" />
        <GradientStop Offset="1.2" Color="#282828" />
      </LinearGradientBrush>
      <TranslateTransform Y="-1" x:Key="Up1" />
      <TranslateTransform Y="1" x:Key="Down1" />


      <!-- 
  *****************************************************************
  Arrow Buttons
  *****************************************************************
  -->

      <Style x:Key="LeftArrow" TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
        <Setter Property="FontSize" Value="7.5pt"/>

        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
              <Grid Width="20" Height="15">
                <Path x:Name="Hi" Fill="{StaticResource RaisedHighlight}" RenderTransform="{StaticResource Up1}" Stretch="Fill" Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                <Path x:Name="Sh" Fill="{StaticResource RaisedShadow}" RenderTransform="{StaticResource Down1}" Stretch="Fill" Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                <Path x:Name="No" Fill="{StaticResource Normal}" Stretch="Fill" Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                <Path x:Name="Mo" Fill="{StaticResource MouseOver}" Opacity="0" Margin="0,1,0,0" Stretch="Fill" Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Trigger.EnterActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <ColorAnimation Storyboard.TargetName="Hi" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="#989898" Duration="0:0:0.1" />
                        <DoubleAnimation Storyboard.TargetName="Mo" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1" />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <ColorAnimation Storyboard.TargetName="Hi" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Duration="0:0:0.3" />
                        <DoubleAnimation  Storyboard.TargetName="Mo" Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                  <Setter TargetName="Mo" Property="Opacity" Value="1" />
                  <Setter TargetName="Mo" Property="Fill" Value="{StaticResource Down}" />
                  <Setter TargetName="Hi" Property="Fill" Value="#101010" />
                  <Setter TargetName="Sh" Property="Fill" Value="#707070" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                  <Setter TargetName="Mo" Property="Opacity" Value="1" />
                  <Setter TargetName="No" Property="Fill" Value="#404040" />
                  <Setter TargetName="Mo" Property="Fill" Value="#0000" />
                  <Setter TargetName="Hi" Property="Fill" Value="#0000" />
                  <Setter TargetName="Sh" Property="Fill" Value="#0000" />
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>


      <Style x:Key="RightArrow" TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
        <Setter Property="FontSize" Value="7.5pt"/>

        <Setter Property="Template">
          <Setter.Value>


            <ControlTemplate TargetType="{x:Type Button}">
              <Grid Width="20" Height="15">
                <Path x:Name="Hi" Fill="{StaticResource RaisedHighlight}" RenderTransform="{StaticResource Up1}" Stretch="Fill" Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                <Path x:Name="Sh" Fill="{StaticResource RaisedShadow}" RenderTransform="{StaticResource Down1}" Stretch="Fill" Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                <Path x:Name="No" Fill="{StaticResource Normal}" Stretch="Fill" Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                <Path x:Name="Mo" Fill="{StaticResource MouseOver}" Opacity="0" Margin="0,1,0,0" Stretch="Fill" Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Trigger.EnterActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <ColorAnimation Storyboard.TargetName="Hi" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="#989898" Duration="0:0:0.1" />
                        <DoubleAnimation Storyboard.TargetName="Mo" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1" />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <ColorAnimation Storyboard.TargetName="Hi" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Duration="0:0:0.3" />
                        <DoubleAnimation  Storyboard.TargetName="Mo" Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                  <Setter TargetName="Mo" Property="Opacity" Value="1" />
                  <Setter TargetName="Mo" Property="Fill" Value="{StaticResource Down}" />
                  <Setter TargetName="Hi" Property="Fill" Value="#101010" />
                  <Setter TargetName="Sh" Property="Fill" Value="#707070" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                  <Setter TargetName="Mo" Property="Opacity" Value="1" />
                  <Setter TargetName="No" Property="Fill" Value="#404040" />
                  <Setter TargetName="Mo" Property="Fill" Value="#0000" />
                  <Setter TargetName="Hi" Property="Fill" Value="#0000" />
                  <Setter TargetName="Sh" Property="Fill" Value="#0000" />
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>

          </Setter.Value>
        </Setter>
      </Style>

    </StackPanel.Resources>

    <StackPanel Margin="1">

      <c:ColorPicker x:Name="C" />

      <!-- controls grid -->

      <Grid Margin="5,0,5,5">

        <Grid.ColumnDefinitions>
          <ColumnDefinition x:Name="col0" Width="Auto" />
          <ColumnDefinition x:Name="col1" Width="10" />
          <ColumnDefinition x:Name="col2" Width="0.7*" />
          <ColumnDefinition x:Name="col3" Width="0.7*" />
          <ColumnDefinition x:Name="col4" Width="10" />
          <ColumnDefinition x:Name="col5" Width="1*" />
          <ColumnDefinition x:Name="col6" Width="5" />
          <ColumnDefinition x:Name="col7" Width="1*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
          <RowDefinition x:Name="row0" Height="17" />
          <RowDefinition x:Name="row1" Height="3" />
          <RowDefinition x:Name="row2" Height="17" />
          <RowDefinition x:Name="row3" Height="3" />
          <RowDefinition x:Name="row4" Height="17" />
          <RowDefinition x:Name="row5" Height="3" />
          <RowDefinition x:Name="row6" Height="17" />
        </Grid.RowDefinitions>

        <!-- Sample Swatch -->
        <Border Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="5" Margin="1" Background="{StaticResource AlphaBrush}" />
        <Border Grid.Column="2" Grid.RowSpan="5" Grid.ColumnSpan="2">
          <Border.Background>
            <SolidColorBrush Color="{Binding ElementName=C, Path=Color}" />
          </Border.Background>
        </Border>
        <c:TextDragger Grid.Column="2" Grid.RowSpan="5" Grid.ColumnSpan="2" Cursor="Hand" Text="{Binding ElementName=C, Path=Color}" />
        <TextBox Grid.Column="2" Grid.Row="6" Grid.ColumnSpan="2" MinWidth="0" MinHeight="0" Height="16" Margin="0,0,0,1" Text="{Binding ElementName=C, Path=Color, UpdateSourceTrigger=PropertyChanged}" />

        <!-- RGB -->
        <TextBlock Grid.Row="0" Grid.Column="5" Margin="0,2,0,0">R</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="5" Margin="0,2,0,0">G</TextBlock>
        <TextBlock Grid.Row="4" Grid.Column="5" Margin="0,2,0,0">B</TextBlock>
        <TextBlock Grid.Row="6" Grid.Column="5" Margin="0,2,0,0">A</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="5" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=R, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="2" Grid.Column="5" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=G, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="4" Grid.Column="5" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=B, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="6" Grid.Column="5" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=A, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

        <!-- HSB -->
        <TextBlock Grid.Row="0" Grid.Column="7" Margin="0,2,0,0">H</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="7" Margin="0,2,0,0">S</TextBlock>
        <TextBlock Grid.Row="4" Grid.Column="7" Margin="0,2,0,0">B</TextBlock>
        <TextBlock Grid.Row="6" Grid.Column="7" Margin="0,2,0,0">A</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="7" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=Hue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="2" Grid.Column="7" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=Saturation, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="4" Grid.Column="7" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=Brightness, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="6" Grid.Column="7" MinWidth="0" MinHeight="0" Height="16" Margin="10,0,0,1" Text="{Binding ElementName=C, Path=Alpha, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />

        <!-- Buttons -->


        <StackPanel Grid.Column="0" Grid.Row="0" Grid.RowSpan="100">

          <ToggleButton ToolTip="Synchronize with selected text" MinWidth="0" MinHeight="0" Height="23" Width="23" Margin="0,0,0,4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" x:Name="SyncButton" IsEnabled="False"  Checked="SyncButtonChecked" Unchecked="SyncButtonUnChecked" >
            <ToggleButton.Triggers>
              <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Link" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                    <DoubleAnimation Storyboard.TargetName="Link_Break" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
              <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Link" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" />
                    <DoubleAnimation Storyboard.TargetName="Link_Break" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </ToggleButton.Triggers>

            <Grid>
              <Image x:Name="Link_Break" Source="Images\disconnect.png" Width="14" Height="14" Margin="5,2,0,0" />
              <Image x:Name="Link" Opacity="0"  Source="Images\connect.png" Width="14" Height="14" Margin="5,2,0,0" />
            </Grid>
          </ToggleButton>

          <Button ToolTip="Copy to the clipboard" Click="CopyColor" MinWidth="0" MinHeight="0" Height="23" Width="23" Margin="0,0,0,4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
            <Image Source="\Images\page_copy.png" Width="12" Height="12" Margin="6,5,0,0">
            </Image>
          </Button>

          <Button ToolTip="Save to saved colors palette" Click="SaveColor" MinWidth="0" MinHeight="0" Height="23" Width="23" Margin="0,0,0,0" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
            <Image Source="Images\disk.png" Width="12" Height="12" Margin="6,5,0,0">
            </Image>
          </Button>

        </StackPanel>











        <StackPanel Visibility="Collapsed"  Grid.Row="6" Grid.Column="0" Margin="0,0,0,0" Orientation="Horizontal" HorizontalAlignment="Center">

          <Button Style="{StaticResource LeftArrow}" Margin="0,0,4,0" />
          <Button Style="{StaticResource RightArrow}" Margin="4,0,0,0" />

        </StackPanel>


      </Grid>

    </StackPanel>

    <ListBox Margin="0,10,0,0" x:Name="SavedColors" Style="{x:Null}" FocusVisualStyle="{x:Null}" ItemsSource="{Binding ElementName=This, Path=Colors}" >
      <ListBox.Resources>

        <ContextMenu x:Key="ColorContextMenu">
          <MenuItem Header="Remove" Click="RemoveColor" />
          <MenuItem Header="Remove All" Click="RemoveAllColors" />
        </ContextMenu>

        <DataTemplate DataType="{x:Type Color}">
          <Grid SnapsToDevicePixels="True" Width="16" Height="16"  Margin="0,0,4,4" Background="{StaticResource AlphaBrush}">
            <Rectangle Fill="{StaticResource AlphaBrush}" />
            <Border
              BorderBrush="Black"
              BorderThickness="1">
              <Border.Background>
                <SolidColorBrush Color="{Binding}" />
              </Border.Background>
            </Border>
            <c:TextDragger Cursor="Hand" MouseDown="SwatchMouseDown" Text="{Binding .}" />
          </Grid>
        </DataTemplate>

        <Style TargetType="{x:Type ListBoxItem}">
          <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
          <Setter Property="ContextMenu" Value="{DynamicResource ColorContextMenu}">
          </Setter>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <ContentPresenter />
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ListBox.Resources>
      <ListBox.Template>
        <ControlTemplate TargetType="{x:Type ListBox}">
          <WrapPanel Width="240"  IsItemsHost="true" />
        </ControlTemplate>
      </ListBox.Template>
    </ListBox>

  </StackPanel>
</UserControl>
